<!--  -->
<template>
  <div class>
    <van-nav-bar title="信息管理" left-arrow @click-left="onClickLeft">
      <!-- <template #right>
        <van-icon name="search" size="18" />
      </template>-->
    </van-nav-bar>

    <!-- <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>-->

    <van-cell
      v-for="(v,k) in data.list"
      :key="k"
      @click="read_msg(v.cid)"
      :title="v.name"
      :value="dateFormat(v.addtime)"
      size="large"
      
    >
    <template #title>
    <span  class="custom-title boldtit"><span v-show="!v.is_read" class="point"></span> {{v.name}}</span>
  </template>


    <template #value>
        <div class="timeval" >{{dateFormat(v.addtime)}}</div>
      </template>
      <template #label>
        <div class="contenttext" v-html="v.content"></div>
        <!-- <p>端午好了端午好了端午好了端午好了端午好了端午好了端午好了</p> -->
      </template>
    </van-cell>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

import Fetch from "../../utils/fetch";
import moment from "moment";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "notice"
    // chargeComp
  },
  data() {
    //这里存放数据
    return {
      loading: true,
      charge_value: "",
      radio: "",
      // password: "",
      // show: false,
      showTip: false,
      actions: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],

      show: false,
      data: [],
      bank: {},
      bank_id: 0,
      money: "",
      passwd: "",
      bg: "",
      psd_type: "password",
      bank_tips: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  filters: {
            
        },
  //方法集合
  methods: {

    dateFormat(time) {
                return moment(parseInt(time) * 1000).format('MM.DD hh:mm');
            },
   dateFun(nS) {     
    return new Date(nS);     
  },
  
    start() {
      Fetch("/user/noticeread/search").then(r => {
        this.data = r.data;
      });

      console.log(this.data);
    },
    read_msg(id) {
      this.$router.push("/notice2?news_id="+id);
    },

    onClickLeft() {
      // Toast('返回');
      this.$router.go(-1);
    },

    onCancel() {
      Toast("取消");
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.start();
   
  // console.log(new Date(1542274800000))
    // this.is_bank();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
/* //@import url(); 引入公共css类 */
.contenttext {
  font-size: 13px;
  /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 18px; */
  /* width: 60%; */
}
.point{
  width: 7px;
height: 7px;
display: inline-block;
background: #fc4200;
border-radius: 50%;
}
.boldtit{
  font-weight: 550;
}
.charge_box {
  width: 100%;
  height: 132px;
  background: #fff;
  /* border-radius: 10px; */
  /* box-shadow: 0px 20px 20px 0px #fff2f0; */
  margin: auto;
  margin-top: 15px;
}
.charge_tit {
  font-size: 16px;
  font-weight: 400;
  color: #5f5f5f;
  line-height: 22px;
  padding: 10px 10px;
}
.other_money {
  font-size: 13px;
  font-weight: 400;
  color: #ff4a35;
  line-height: 18px;
  padding: 10px 10px;
}
.cell-group {
  width: 100%;
  height: 42px;
  /* background: #f7f7f7; */
  /* border-bottom: 1px solid #f7f7f7; */
  border-radius: 3px;
  /* margin: auto; */
}
.cell-group .van-cell {
  /* border-bottom: 1px solid #f7f7f7; */
  border-radius: 4px;
}
.bgfff {
  background: #fff;
  margin-top: 15px;
  padding-bottom: 20px;
}
.bgfff .van-cell {
  align-items: center;
}
.pay_item {
  display: flex;
  align-items: center;
}
.pay_item img {
  width: 23px;
  height: 19px;
}
.pay_itemcloum {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}
.charge_num {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 14px;
  margin-top: 20px;
}
.charge_num .item {
  /* flex: 1; */
  width: 106px;
  height: 56px;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 500;
  color: #3a3a3a;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 10px;
}
.react {
  width: 76px;
  height: 24px;
  position: absolute;
  right: 0;
  top: -12px;
  background: url("../../assets/vip/react.png") no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-size: 12px;
  color: #fff;
  line-height: 20px;
}
.pay_methods {
  padding: 0px 14px 20px 14px;
  /* margin-top: 20px; */
}
.pay_tit {
  font-size: 13px;
  font-weight: 500;
  color: #3e3e3e;
  line-height: 18px;
  padding: 20px 0;
}
.btn_charge {
  width: 318px;
  height: 50px;
  margin: auto;
  display: block;
  background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
  border-radius: 5px;
  box-shadow: 0px 2px 4px 0px #ffd9d4;
  margin-top: 100px;
}
.forget {
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  color: #818181;
  padding-right: 10px;
}

.card_item {
  width: 351px;
  height: 128px;
  background: url("../../assets/vip/1.png") no-repeat;
  background-size: 100% 100%;
  margin: auto;
}
.bank_name {
  padding-left: 45px;
  padding-top: 17px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 300px;
  height: 310px;
  background-color: #fff;
  border-radius: 20px;
  position: relative;
}
.bank_num {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  padding-top: 30px;
}
.txtTit {
  color: #ff6b4f;
  line-height: 30px;
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  padding: 15px 0;
}
.txtSty {
  width: 220px;
  height: 84px;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: justify;
  color: #454545;
  line-height: 21px;
  letter-spacing: 0px;
  margin: auto;
  padding: 5px 0;
}
.crossSty {
  position: absolute;
  color: red;
  right: 8px;
  top: 20px;

  z-index: 111;
}
</style>